<template>
  <!-- 左侧抽屉 -->
  <el-drawer :title="showTxt" :visible="drawer" size="55%" :wrapper-closable="false" @close="closeDrawer">
    <el-tabs v-model="actifirsteName">
      <el-tab-pane label="基础信息" name="first" class="basicInformation">
        <el-form ref="drawerForm" :inline="true" :model="form" :rules="rules" label-position="top">
          <el-form-item prop="name" label="小区名称">
            <el-input v-model="form.name" placeholder="请输入" />
          </el-form-item>
          <el-form-item prop="address" label="坐落地址">
            <!-- <span>坐落地址</span> -->
            <el-input v-model="form.address" placeholder="请输入" />
          </el-form-item>
          <el-form-item prop="area" label="占地面积">
            <el-input v-model="form.area" controls-position="right" placeholder="请输入" />
          </el-form-item>
          <el-form-item prop="developer" label="开发商名称">
            <el-input v-model="form.developer" placeholder="请输入" />
          </el-form-item>
          <el-form-item prop="estate" label="物业公司名称">
            <el-input v-model="form.estate" placeholder="请输入" />
          </el-form-item>
          <el-form-item prop="greening_rate" label="绿化率">
            <el-input v-model="form.greening_rate" controls-position="right" placeholder="请输入" />
          </el-form-item>
          <el-form-item prop="total_building" label="总栋数">
            <el-input-number v-model="form.total_building" controls-position="right" :min="0" placeholder="请输入" />

          </el-form-item>
          <el-form-item prop="total_owner" label="总户数">
            <el-input-number v-model="form.total_owner" controls-position="right" :min="0" placeholder="请输入" />
          </el-form-item>
          <el-form-item class="but-rigth">
            <el-button>取消</el-button>
            <el-button type="primary" @click.native="submitData">确认</el-button>
          </el-form-item>
        </el-form>
      </el-tab-pane>

      <el-tab-pane label="详细信息" name="second" class="detailedInformation">
        <el-form :inline="true" label-position="top" :model="form" :rules="rules">
          <el-form-item label="小区图片" class="imgs">
            <ImageUpload ref="ImageUpload" />
          </el-form-item>
          <el-form-item class="formItem" prop="position" label="经纬度">
            <el-input v-model="form.position" placeholder="请输入" :disabled="true" />
          </el-form-item>
          <el-form-item class="but">
            <el-button type="primary" @click.native.stop="GetMap">点击获取</el-button>
          </el-form-item>
          <el-form-item label="详细描述" prop="introduction">
            <!-- <quill-editor v-model="form.introduction" /> -->
            <quillEditor v-model="form.introduction" />
          </el-form-item>
          <el-form-item class="but-rigth">
            <el-button @close="closeDrawer">取消</el-button>
            <el-button type="primary" @click="submitData">确认</el-button>
          </el-form-item>
        </el-form>
      </el-tab-pane>
    </el-tabs>

  </el-drawer>
</template>

<script>
import 'quill/dist/quill.core.css'
import 'quill/dist/quill.snow.css'
import 'quill/dist/quill.bubble.css'

import { quillEditor } from 'vue-quill-editor'
import ImageUpload from '@/components/ImageUpload'
import eventBus from '@/assets/JS/eventBus'
import { dataUploadAPI, singleParticulars, compileParticularsAPI } from '@/api/BBSManage'
export default {
  components: {
    ImageUpload,
    quillEditor
  },
  props: {
    drawer: {
      type: Boolean,
      default: false
    },
    userID: {
      type: Number,
      default: null
    }
  },
  data() {
    return {
      // 弹层开关
      dialog: false,
      // 抽屉默认页面
      actifirsteName: 'first',

      // 抽屉数据w
      form: {
        id: null,
        // 小区名称
        name: '',
        // 地址
        address: '',
        // 面积
        area: '',
        // 开发者名称
        developer: '',
        // 物业
        estate: '',
        // 绿化率
        greening_rate: '',
        // 总栋数
        total_building: '',
        // 总户数
        total_owner: '',
        // 图片
        thumb: '',
        // 经纬度
        position: '',
        // 详细描述
        introduction: ''
      },
      rules: {
        name: [{ required: true, message: '小区名称不可为空', trigger: 'blur' }],
        address: [{ required: true, message: '地址不可为空', trigger: 'blur' }],
        area: [{ required: true, message: '面积不可为空', trigger: 'blur' }],
        developer: [{ required: true, message: '开发者名称不可为空', trigger: 'blur' }],
        estate: [{ required: true, message: '物业不可为空', trigger: 'blur' }],
        greening_rate: [{ required: true, message: '绿化率不可为空', trigger: 'blur' }],
        total_building: [{ required: true, message: '总栋数不可为空', trigger: 'blur' }],
        total_owner: [{ required: true, message: '总户数不可为空', trigger: 'blur' }],
        thumb: [{ required: true, message: '图片不可为空', trigger: 'blur' }],
        position: [{ required: true, message: '经纬度不可为空', trigger: 'blur' }],
        introduction: [{ required: true, message: '详细描述不可为空', trigger: 'blur' }]
      }

    }
  },
  computed: {
    showTxt() {
      return this.form.id ? '编辑小区' : '新增小区'
    }
  },
  created() {
    // 获取到兄弟级传来的弹窗状态
    eventBus.$on('ClosedShell', data => {
      // console.log(data)
      this.dialog = data
    })
    // 获取到兄弟级传来的经纬度
    eventBus.$on('orientate', data => {
      // console.log(data)
      this.form.position = data
    })
    // 判断是否有
  },
  methods: {
    // 关闭弹窗
    closeDrawer() {
      this.$emit('update:drawer', false)
      this.form = {
        // 小区名称
        name: '',
        // 地址
        address: '',
        // 面积
        area: '',
        // 开发者名称
        developer: '',
        // 物业
        estate: '',
        // 绿化率
        greening_rate: '',
        // 总栋数
        total_building: '',
        // 总户数
        total_owner: '',
        // 图片
        thumb: '',
        // 经纬度
        position: '',
        // 详细描述
        introduction: ''
      }
    },
    // 向兄弟组件传值
    GetMap() {
      // 向兄弟组件传值
      this.dialog = true
      eventBus.$emit('layerSwitch', this.dialog)
      // console.log(111)
    },
    // 数据回显
    async ObtainDetails(id) {
      // 保存id
      this.form.id = id
      // 获得单个小区数据
      const { data } = await singleParticulars(id)
      // 将获取的数据赋给表单
      this.form = data
      // 图片回显
      this.$refs.ImageUpload.fileList = [
        {
          url: 'http://124.223.14.236:8881' + data.thumb,
          realtiveUrl: data.thumb
        }
      ]
    },
    // 提交新增/修改数据
    submitData() {
      // 先获取到子组件的全部事件
      const res = this.$refs.ImageUpload
      // 找到图片的url
      const url = res.fileList[0]?.realtiveUrl
      // 赋给上传的数据项
      // console.log(this.form)
      this.form.greening_rate = this.form.greening_rate + ''
      this.form.area = this.form.area + ''
      this.form.thumb = url
      this.$refs.drawerForm.validate(async vali => {
        if (!vali) return
        if (this.form.thumb === '' || this.form.position === '' || this.form.introduction === '') {
          this.$message.error('必填项不允许为空')
        }
        if (this.form.id) {
          const res = await compileParticularsAPI(this.form)
          console.log(res)
        } else {
          await dataUploadAPI(this.form)
          this.$message.success('新增成功')
        }
        this.closeDrawer()
        this.$parent.BBSData()
      })
    }
  }
}
</script>

<style lang="scss" scoped>
.el-tabs{
    margin: 0 30px;
  }
.basicInformation{
    // padding: 0 5px;
    .el-form-item{
      span{
        font-weight: 800;
      }
      .el-input,.el-input-number{
        display: block;
        width:370px;
        height: 40px
      }
      // .el-input,.el-input-number:nth-child(odd){
      //   margin-right: 1px;
      // }
    }

  }
  .but-rigth{
      float: right;
    }
  ::v-deep .el-input-number .el-input__inner{
    text-align: left;
  }

  span{
    font-weight: 800;
  }
  .formItem{
    margin-right: 0;
    margin-left: 200px;
  }
  .but{
    margin-top: 50px;
  }
  ::v-deep .ql-toolbar.ql-snow + .ql-container.ql-snow{
    height: 200px;
  }
  ::v-deep .el-upload--picture-card{
    width: 100px;
    height: 100px;
    line-height: 100px;
  }
  ::v-deep .ql-toolbar.ql-snow + .ql-container.ql-snow{
    height: 100px;
  }
  .imgs{
    margin-bottom: 0;
  }
</style>
